<template>
  <view>
    <view class="signup" v-for="(sign, index) in signList" :key="index">
      <view class="title">
        {{ sign.title }}
      </view>
      <view class="Simg">
        <image src="@/static/My/Activities.png" mode="widthFix" />
      </view>
      <view class="detail">
        <view class="detail-com">
          <view class="detail-organ">
            <image src="@/static/My/company.png" mode="widthFix" class="comImg" />
            <text class="organizer-text">{{ sign.organizer }}</text>
          </view>
          <view>
            <text class="pnum-text">{{ sign.pnum }}人</text>
          </view>
        </view>
        <view class="detail-bot">
          <view class="bot">
            <text class="bot-text">{{ sign.status === 1 ? '报名中' : '已结束' }}</text>
          </view>
          <view class="bot-time">
            <image src="@/static/My/time.png" mode="widthFix" class="timeImg" />
            <view class="time-text">{{ sign.time }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
//活动进行中
type SignupItem = {
  title: string //活动标题
  image: string //活动主视觉图片链接
  organizer: string //主办单位
  pnum: string //参与人数
  time: string //活动时间
  status: number //活动状态
}

const signList = ref<SignupItem[]>([
  {
    title: '单身青年联谊活动',
    image: '/static/images/single.png',
    organizer: '拓峰体育发展有限公司',
    pnum: '50-90',
    time: '2024/08/01',
    status: 1,
  },
  {
    title: '单身青年联谊活动',
    image: '/static/images/single.png',
    organizer: '拓峰体育发展有限公司',
    pnum: '50-90',
    time: '2024/08/01',
    status: 1,
  },
  {
    title: '单身青年联谊活动',
    image: '/static/images/single.png',
    organizer: '拓峰体育发展有限公司',
    pnum: '50-90',
    time: '2024/08/01',
    status: 1,
  },
  {
    title: '单身青年联谊活动',
    image: '/static/images/single.png',
    organizer: '拓峰体育发展有限公司',
    pnum: '50-90',
    time: '2024/08/01',
    status: 0,
  },
])
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  font-family: Alibaba PuHuiTi;
  font-weight: 900;
  font-size: 40rpx;
  color: #221815;
}

.signup {
  width: 100%;
  height: 100%;
  padding: 5%;
  margin: 3% auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  background-color: white;
}

.Simg {
  width: 100%;

  image {
    width: 100%;
    border-radius: 20rpx;
    margin-top: 4%;
  }
}

.detail-com {
  display: flex;
  justify-content: space-between;
}

.pnum-text {
  width: 572rpx;
  font-family: FandolHei;
  font-weight: 400;
  font-size: 28rpx;
  color: #221815;
  line-height: 58rpx;
}

.detail-organ {
  display: flex;
  align-items: center;

  .comImg {
    width: 34rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }

  .organizer-text {
    font-family: FandolHei;
    font-weight: 400;
    font-size: 28rpx;
    color: #221815;
    line-height: 58rpx;
  }
}

.bot-time {
  width: 30%;
  display: flex;
  align-items: center;

  .timeImg {
    width: 27rpx;
    height: 27rpx;
    margin-right: 10rpx;

    image {
      width: 27rpx;
      height: 27rpx;
    }
  }

  .time-text {
    width: 118rpx;
    font-family: FZHei-B01S;
    font-weight: 400;
    font-size: 28rpx;
    color: #221815;
    line-height: 58rpx;
  }
}

.detail-bot {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
}

.bot {
  width: 22%;
  border-radius: 20rpx;
  background: linear-gradient(to right, #5db3e4, #88c4e6, #aadbe7);
}

.bot-text {
  width: 80rpx;
  height: 26rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 800;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 58rpx;
  margin-left: 15%;
}
</style>
